import { useState, useEffect } from 'react';
import { ReturnBookState, bookStatus } from '../returnBook/interface';
import { IDType } from '../personnelEntry/interface';
import { Descriptions } from 'antd';
import { fetchBorrowBookDetails } from '@/service/borrowBook';
import type { ProFieldFCMode } from '@ant-design/pro-utils';
import { history } from 'umi';
import Field from '@ant-design/pro-field';
export default function Details(props: any) {
    const bookid = props.match.params.id;
    const show = 'read' as ProFieldFCMode;
    const [state, setstate] = useState<ReturnBookState>();
    const dataSourceRequest = async () => {
        const response = await fetchBorrowBookDetails({ rent_id: bookid });
        if (response?.code === 200) {
            setstate(response?.data);
        }
    };
    useEffect(() => {
        dataSourceRequest();
    }, [bookid]);

    return (
        <div style={{ padding: '20px', background: '#fff' }}>
            <Descriptions column={4}>
                <Descriptions.Item label="订单编号">
                    <Field
                        text={state?.order_no}
                        valueType="text"
                        mode={show}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="RFID编号">
                    <Field text={state?.rfid} valueType="text" mode={show} />
                </Descriptions.Item>
                <Descriptions.Item label="ISBN编号">
                    <Field text={state?.isbn} valueType="text" mode={show} />
                </Descriptions.Item>
                <Descriptions.Item label="书名">
                    {state?.book_name ? (
                        <span
                            style={{
                                cursor: 'pointer',
                                color: '#1890ff',
                            }}
                            onClick={() => {
                                history.push(
                                    `/enrollBook/details/${state?.book_id}`,
                                );
                            }}
                        >
                            {state?.book_name}
                        </span>
                    ) : (
                        <Field
                            text={state?.book_name}
                            valueType="text"
                            mode={show}
                        />
                    )}
                </Descriptions.Item>
                <Descriptions.Item label="类别">
                    <Field
                        text={state?.cate_name}
                        valueType="text"
                        mode={show}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="作者">
                    <Field text={state?.author} valueType="text" mode={show} />
                </Descriptions.Item>

                <Descriptions.Item label="租赁人">
                    {state?.borrow_username ? (
                        <span
                            style={{
                                cursor: 'pointer',
                                color: '#1890ff',
                            }}
                            onClick={() => {
                                history.push(
                                    `/personalCenter/${state?.borrow_user_id}`,
                                );
                            }}
                        >
                            {state?.borrow_username}
                        </span>
                    ) : (
                        <Field
                            text={state?.borrow_username}
                            valueType="text"
                            mode={show}
                        />
                    )}
                </Descriptions.Item>
                <Descriptions.Item label="租赁时间">
                    <Field
                        text={state?.rent_time}
                        valueType="dateTime"
                        mode={show}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="租赁状态">
                    <Field
                        text={state?.status}
                        valueEnum={bookStatus}
                        mode={show}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="租赁人地址">
                    <Field text={state?.address} valueType="text" mode={show} />
                </Descriptions.Item>

                <Descriptions.Item label="证件类型">
                    <Field
                        text={state?.no_type}
                        valueEnum={IDType}
                        mode={show}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="证件编号">
                    <Field text={state?.no} valueType="text" mode={show} />
                </Descriptions.Item>
            </Descriptions>
        </div>
    );
}
